<template>
  <div>
      <h3>基础用法</h3>
      <p>基础的布局组件用法</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
          <g-row gutter="20" class="wrapper">
              <g-clo span='4' ><p>1</p></g-clo>
              <g-clo span='4'><p>2</p></g-clo>
              <g-clo span='4'><p>1</p></g-clo>
          </g-row>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(0)" ref="xxx">
          <g-icon class="icon-down" :icon="isShow[0] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>
      <h3>align对齐方式，offset偏移。</h3>
      <p>添加align属性的设置列的位置对齐方式</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
          <g-row align="left" class='wrapper'>
              <g-clo span="2"><p>1</p></g-clo>
              <g-clo span="22" ><p>3</p></g-clo>
          </g-row>
          <g-row align="center" class='wrapper'>
              <g-clo span="4"><p>1</p></g-clo>
              <g-clo span="16" offset="4"><p>3</p></g-clo>
          </g-row>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr1}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(1)" ref="xxx">
          <g-icon class="icon-down" :icon="isShow[1] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[1] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>
      <h3>适配多端设备</h3>
      <p>通过ipad，narrow-pc，pc，widePc的属性设置，适配不同的设备。</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
         <g-row gutter="10" class="wrapper">
             <g-clo span="24"
                    :ipad="{span:12,offset:0}"
                    :narrow-pc="{span:8}"
                    :pc="{span:4}"><p>1</p></g-clo>
             <g-clo span="24"
                    :ipad="{span:12,offset:0}"
                    :narrow-pc="{span:16}"
                    :pc="{span:20}"><p>2</p></g-clo>
         </g-row>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr2}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(2)" ref="xxx">
          <g-icon class="icon-down" :icon="isShow[2] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[2] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>

      <h3>attributes</h3>
      <p>组件参数说明</p>
    </div>
  </div>
</template>
 
<script lang="ts">
import Vue from "vue";
import gRow from "../../../src/Row.vue";
import gCol from "../../../src/Col.vue";
import mixin from "../mixin";
import Icon from '../../../src/Icon.vue'

export default {
  name: "gButton",
  mixins: [mixin],
  data() {
    return {
      loading1: true,
      codeStr: `<g-row gutter="20">
              <g-clo>1</g-clo>
              <g-clo>2</g-clo>
              <g-clo>3</g-clo>
          </g-row>`.replace(/^\s*/gm, "")
        .trim(),
      codeStr1: `<g-row align="left">
              <g-clo span="2">1</g-clo>
              <g-clo span="22" >3</g-clo>
          </g-row>
          <g-row align="center">
              <g-clo span="4">1</g-clo>
              <g-clo span="16" offset="4">3</g-clo>
          </g-row>`.replace(/^\s*/gm, "")
        .trim(),
      codeStr2: `<g-row gutter="10">
             <g-clo span="24"
                    :ipad="{span:12,offset:0}"
                    :narrow-pc="{span:8}"
                    :pc="{span:4}">1</g-clo>
             <g-clo span="24"
                    :ipad="{span:12,offset:0}"
                    :narrow-pc="{span:16}"
                    :pc="{span:20}">2</g-clo>
         </g-row>`.replace(/^\s*/gm, "")
        .trim(),
     
    };
  },
  components: {
    "g-clo": gCol,
    "g-icon":Icon,
    'g-row':gRow
  },
};
</script>
<style scoped lang='scss'>
.wrapper{
  p{
    background: rgb(177, 177, 235);
  }
}
</style>
